<template>
  <div class="page-alert">
    <div class="alert-mani">
      <Button type="primary" @click="alertAddEdit()">
        <Icon type="md-add"></Icon> 添加告警
      </Button>
      <Button type="primary" @click="oneKey">
        <Icon type="md-notifications-outline" /> 一键告警
      </Button>
      <Button type="success" @click="goHistory">
        <Icon type="ios-paper"></Icon>历史记录
      </Button>
    </div>
    <div class="zl-page-loading" v-if="isLoading">
      <Spin fix></Spin>
    </div>
    <Table :columns="columns" :data="alertList" v-else></Table>
    <!-- 添加、编辑告警服务 -->
    <add-modify-modal :visible.sync="alertVisible" :form="form" @finish="init"></add-modify-modal>
    <!-- 一键告警 -->
    <one-key :visible.sync="oneKeyVisible" @finish="init"></one-key>
  </div>
</template>
<script type="text/javascript">
import AddModifyModal from '@/components/alert/add-modify-modal'
import OneKey from '@/components/alert/one-key'
import Fetch from '@/api/request'
export default {
  components: {
    AddModifyModal, OneKey
  },
  data() {
    return {
      columns: [{
        type: 'index',
        width: 60
      }, {
        title: '任务名称',
        render: (h, params) => {
          return h('span', {
            class: 'zl-link',
            on: {
              click: () => {
                this.$router.push('/home/alert/' + params.row.jobName)
              }
            }
          }, params.row.jobName)
        }
      }, {
        title: '创建时间',
        key: 'createTime'
      }, {
        title: '操作',
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('div', {
              class: 'button-inner',
              on: {
                click: () => {
                  this.alertAddEdit(params.row)
                }
              }
            }, [
              h('Icon', {
                props: {
                  type: 'ios-create-outline'
                }
              }, ''),
              '编辑'
            ]),
            h('div', {
              class: 'button-inner',
              on: {
                click: () => {
                  this.alertDelete(params.row)
                }
              }
            }, [
              h('Icon', {
                props: {
                  type: 'md-trash'
                }
              }, ''),
              '删除'
            ])
          ])
        }
      }],
      alertList: [],
      alertVisible: false,
      form: {},
      oneKeyVisible: false,
      isLoading: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 获取告警列表
    init() {
      Fetch.get({
        url: '/api/scheduler-job/alert',
        self: 'then',
        done: () => {
          this.isLoading = false
        }
      }).then(({data}) => {
        if (data.code === '1' || data.code === '0' || data.code === 0) {
          this.alertList = data.data || []
        }
        this.isLoading = false
      })
    },
    // 告警编辑
    alertAddEdit(alert) {
      this.alertVisible = true
      if (alert) {
        this.form = alert
      } else {
        this.form = {}
      }
    },
    // 打开一键告警弹窗
    oneKey() {
      this.oneKeyVisible = true
    },
    // 告警删除
    alertDelete(alert) {
      this.$Modal.confirm({
        title: '系统提示',
        content: '确定删除告警（' + alert.jobName + '）?',
        loading: true,
        onOk: () => {
          Fetch.delete({
            url: '/api/scheduler-job/alert/' + alert.jobName
          }).then((res) => {
            if (res && res.code === '0') {
              this.$Message.success({
                content: '删除告警（' + alert.jobName + '）成功！',
                duration: this.DURATION
              })
              this.init()
            } else {
              this.$Message.warning({
                content: res.message,
                duration: this.DURATION
              })
            }
            this.$Modal.remove()
          }).catch((err) => {
            this.$Modal.remove()
            this.$Message.error(err.message)
          })
        }
      })
    },
    // 进入告警历史页面
    goHistory() {
      this.$router.push('/home/alert/history')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert-mani {
  padding: 0 0 15px 0;
  .ivu-btn {
    margin-right: 10px;
  }
}
</style>
